<template>
    <div>
        <!-- 导航栏 -->
        <div class="t-nav">
            <div class="nav-content">
                <ul>
  					<li><div>用户adimn，欢迎您使用</div></li>
  					<li><el-button type = "info" @click="logout" style="background-color: slategray;">退出</el-button></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TopNav",
        data(){
        	return{
        		
        	}
        },
        methods:{
        	logout(){
        		this.$router.push('/login');
        	}
        }
    }
</script>

<style scoped>
    .t-nav {
        width: 100%;
        height: 50px;
        background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
        opacity: 0.9;
        z-index: 999;
        position: fixed;
        top: 0;
        left: 0;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.11);
    }

    .nav-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        width: 100%;
        color: white;
    }

    .nav-content ul {
        display: flex;
        align-items: center;
        height: 100%;
    }

    .nav-content li {
        font-size: 18px;
        margin: 0 30px;
    }

</style>